<!--
 * @Author: 刘鑫
 * @Date: 2020-11-10 16:55:29
 * @LastEditors: 刘鑫
 * @LastEditTime: 2020-11-11 21:01:46
 * @Description: 
-->
<template>
  <div class="one">
    <img :src="banner.image" alt="" />
    <div class="list">
      <p v-for="item in arr" :key="item.id" @click="goDetail(item.id)">
        <img :src="item.image" alt="" />
        <span>{{ item.name }}</span>
      </p>
    </div>
    <div class="city">
      <div class="o"><van-icon name="award" />郑州市</div>
      <p
        v-for="(item, index) in cityList"
        :key="index"
        @click="goDetail(item.id)"
      >
        <img :src="item.image" alt="" />
        <span>{{ item.name }}</span>
      </p>
    </div>
    <div class="BottomTab">
      <span
        v-for="(item, index) in state.bottomList"
        :key="index"
        :class="state.curIndex === index ? 'active' : ''"
        @click="tab(index)"
      >
        {{ item }}
      </span>
    </div>
    <div class="info">
      <dl v-for="item in recommedList" :key="item.id">
        <dt @click="play(item.id)">
          <!-- <img :src="item.image" alt="" /> -->
          <video ref="home-video" autoplay loop muted poster="item.image">
            <source :src="item.video" type="video/mp4" />
          </video>
        </dt>
        <dd>
          <p>{{ item.title }}</p>

          <p>
            <span><img :src="item.avatar" alt="" />{{ item.nickname }}</span
            ><span style="color: #ccc">推荐值：{{ item.score }}</span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, computed, reactive, ref } from "vue";
export default defineComponent({
  props: ["arr", "banner", "cityList"],

  setup() {
    let state = reactive({
      curIndex: 0,
      bottomList: ["严选最新", "一周排名", "当月排名", "视频", "官方"],
    });
    const router = useRouter();
    let store = useStore();
    let goDetail = (id) => {
      router.push("/detail");
    };
    //推荐严选数据
    store.dispatch("home/getRecommendList", {
      mid: 0,
      rankCategoryId: 0,
      pageNo: 1,
      orderBy: 1,
      filter: "",
    });
    const play = (id) => {};
    const tab = (index) => {
      state.curIndex = index;
    };
    return {
      goDetail, //推荐严选数据
      state,
      tab,
      recommedList: computed(() => store.state.home.recommedList),
    };
  },
});
</script>

<style lang='scss'>
.one {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  img {
    width: 97%;
    height: 200px;
    padding: 5px;
    border-radius: 10px;
  }
  .list {
    border: 1px solid #eee;
    border-radius: 10px;
    width: 95%;
    margin: 5px auto;
    height: 200px;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    p {
      width: 24%;
      height: 50px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;
      padding-bottom: 30px;
      img {
        width: 50%;
        height: 80%;
        margin: 0 auto;
      }

      span {
        width: 100%;
        height: 20%;
        font-size: 13px;
        font-weight: 800;
        text-align: center;
        margin-top: 10px;
      }
    }
  }
  .city {
    border: 1px solid #eee;
    border-radius: 10px;
    width: 95%;
    height: 140px;
    margin: 8px auto;
    // background: red;
    .o {
      padding: 10px;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
    }
    p {
      width: 25%;
      margin-top: 4px;
      height: 50px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;

      img {
        width: 50%;
        height: 80%;
        margin: 0 auto;
      }

      span {
        width: 100%;
        height: 30px;
        font-size: 13px;
        font-weight: 800;
        text-align: center;
        margin-top: 10px;
      }
    }
  }
  .BottomTab {
    width: 100%;
    height: 35px;
    display: flex;
    margin-top: 10px;
    overflow: hidden;
    overflow-x: auto;
    align-items: center;

    span {
      min-width: 100px;
      padding: 4px 0;
      text-align: center;
    }
  }
  .info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    dl {
      width: 45%;
      height: 200px;
      margin-top: 4px;
      dt {
        width: 100%;
        height: 60%;
        position: relative;
        video {
          width: 100%;
          height: 100%;
          // padding: 30px 0;
          position: absolute;
          left: 0;
          top: 0;

          object-fit: fill;
        }
      }
      dd {
        width: 100%;
        p {
          margin-top: 10px;
          font-size: 12px;
          font-weight: 800;
        }
        p:nth-child(2) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            text-align: center;
          }
          img {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: middle;
          }
        }
      }
    }
  }
}
// ::-webkit-scrollbar {
//   display: none;
// }
</style>